<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="渐变模式图片查看器" />
<meta name="description" content="渐变模式图片查看器，兼容IE6" />
<title>魔蝎 - 渐变模式图片查看器</title>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/jquery.min.js"></script>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/mx-slide-min.js"></script>
</head>
<body style="padding:15px 30px;">

<h1 >渐变模式，图片查看器</h1>
<div style="clear:both; height:20px;"></div>
<!-- mx-slide -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-fade.css" />
<script type="text/javascript">
mx_slide('#mx-fade').event('click').auto(false).start(function(i){
	var e = $('#mx-fade .mx-change-hidden'),
		scroll = parseInt(i/5)*e.width();	//获取滑动值
		scroll += parseInt(i/5) ? 5 : 0;	// margn-right:5px 的偏移值
	e.stop().animate({ scrollLeft : scroll }, 300);
});

//序列缩略图
$(document).ready(function(){
	var e = $('#mx-fade .mx-change-hidden'),
		back = $('#mx-fade .mx-change .mx-back'),
		next = $('#mx-fade .mx-change .mx-next'),
		cs = function(){
			if( parseInt( e.scrollLeft()/e.width() ) ){
			back.css({ color:'#777', cursor:'pointer' });
			}
			else {
				back.css({ color:'', cursor:'' });
			}
			if( parseInt(e.scrollLeft()/e.width()) < e.find('span').length/5-1 ){
				next.css({ color:'#777', cursor:'pointer' });
			}
			else {
				next.css({ color:'', cursor:'' });
			}
		},
		f = function(fn){ e.animate({ scrollLeft : fn( parseInt(e.scrollLeft()/e.width()) ) }, 300 )};
	cs();	//初次判断
	e.scroll(function(){ cs() });
	back.click(function(){
		f(function(i){
			var b = i ? (i-1)*e.width() : 0;		//获取滑动值
			return b += i-1 > 0 ? 5 : 0;	//css margn-right:5px 的偏移值
		});
	});
	next.click(function(){
		f(function(i){
			return i < e.find('span').length/5-1 ? (i+1)*e.width()+5 : e.scrollLeft();  //+5 为 margn-right:5px 的偏移值
		});
	});
});

</script>
<div id="mx-fade">
	<div class="mx-hidden">
	<div class="mx-width">
		<div class="mx-content">
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/4.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
		</div>
	</div>
	</div>
	<div class="mx-change">
		<div class="mx-change-hidden">
		<div class="mx-change-width">
			<span><img src="mystatics/images/0.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/1.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/2.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/3.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/4.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/3.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/2.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/1.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/0.jpg" title="" alt="" /></span>
			<span><img src="mystatics/images/3.jpg" title="" alt="" /></span>
		</div>
		</div>
		<a href="javascript:;" class="mx-back"><</a>
		<a href="javascript:;" class="mx-next">></a>
	</div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<!-- end -->
<div style="clear:both; height:20px;"></div>
<div style="width:1178px; padding:10px; border:1px solid #d0d0d0; background:#f0f0f0; line-height:26px">
mx_slide('#mx-fade').event('click').auto(false).start(function(i){<br/>
　　var e = $('#mx-fade .mx-change-hidden'),<br/>
　　　　scroll = parseInt(i/5)*e.width();	//获取滑动值<br/>
　　scroll += parseInt(i/5) ? 5 : 0;	// margn-right:5px 的偏移值<br/>
　　e.stop().animate({ scrollLeft : scroll }, 300);<br/>
});<br/>
<br/>
//序列缩略图<br/>
$(document).ready(function(){<br/>
　　var e = $('#mx-fade .mx-change-hidden'),<br/>
　　　　back = $('#mx-fade .mx-change .mx-back'),<br/>
　　　　next = $('#mx-fade .mx-change .mx-next'),<br/>
　　　　cs = function(){<br/>
　　　　　　if( parseInt( e.scrollLeft()/e.width() ) ){<br/>
　　　　　　　　back.css({ color:'#777', cursor:'pointer' });<br/>
　　　　　　}<br/>
　　　　　　else {<br/>
　　　　　　　　back.css({ color:'', cursor:'' });<br/>
　　　　　　}<br/>
　　　　　　if( parseInt(e.scrollLeft()/e.width()) < e.find('span').length/5-1 ){<br/>
　　　　　　　　next.css({ color:'#777', cursor:'pointer' });<br/>
　　　　　　}<br/>
　　　　　　else {<br/>
　　　　　　　　next.css({ color:'', cursor:'' });<br/>
　　　　　　}<br/>
　　　　},<br/>
　　　　f = function(fn){ e.animate({ scrollLeft : fn( parseInt(e.scrollLeft()/e.width()) ) }, 300 )};<br/>
　　cs();	//初次判断<br/>
　　e.scroll(function(){ cs() });<br/>
　　back.click(function(){<br/>
　　　　f(function(i){<br/>
　　　　　　var b = i ? (i-1)*e.width() : 0;		//获取滑动值<br/>
　　　　　　return b += i-1 > 0 ? 5 : 0;	//css margn-right:5px 的偏移值<br/>
　　　　});<br/>
　　});<br/>
　　next.click(function(){<br/>
　　　　f(function(i){<br/>
　　　　　　return i < e.find('span').length/5-1 ? (i+1)*e.width()+5 : e.scrollLeft();  //+5 为 margn-right:5px 的偏移值<br/>
　　　　});<br/>
　　});<br/>
});
</div>
<div style="clear:both; height:50px;"></div>
<div>下载地址：<a href="mx_slide.zip" title="点击下载" target="_blank">mx_slide.zip</a></div>
<div style="clear:both; height:10px;"></div>
<p>QQ群：Web前端JavaScript <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=005e26fc32422224a44a0148c6d4f9d2e7f9b0807e58af168c5a678554c18c6e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Web前端-JavaScript" title="Web前端-JavaScript"></a> —— 1929 88681</p>
</body>
</html>